<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<div class="div-search layui-col-md3">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">主键</label>
            <div class="layui-input-block">
                <input type="text" name="id" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block">
                <input type="text" name="order_id" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="order_tunnel_id">
                    <option value="">无所谓</option>
                    <option value="45">45</option>
                    <option value="36">36</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</div>

<div class="layui-table layui-col-xs6">
    <table id="demo" lay-filter="test"></table>
</div>


<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        let table = layui.table;
        let form = layui.form;

        //第一个实例
        const tableIns = table.render({
            elem: '#demo'
            , url: '/index/index/getWechatOrder' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 300,}
                , {field: 'merchant_no', title: '商户号', width: 300}
                , {field: 'merchant_name', title: '商户名称', width: 200,}
                , {field: 'order_id', title: '订单号', width: 230}
                , {field: 'tunnel_no', title: '通道商户号', width: 250}
                , {field: 'tunnel_name', title: '通道商户名称', width: 200,}
                , {field: 'order_amount', title: '订单金额', width: 80,}
                , {field: 'tunnel_type_chinese', title: '支付方式', width: 100}
                , {field: 'create_time', title: '创建时间', width: 200,}
            ]]
        });

        form.on('submit(formDemo)', data => {
            console.log(data);
            const id = data.field.id;
            const order_id = data.field.order_id;
            const order_tunnel_id = data.field.order_tunnel_id;
            if (id === '' && order_id === '' && order_tunnel_id === '') {
                layer.alert('请填写搜索条件');
                return false;
            }
            tableIns.reload({
                where: {
                    id, order_id, order_tunnel_id
                }
            })
        })

    });
</script>
</body>
</html>